<template>
  <div class="follow-type-config">
    <!-- 新增按钮区域 -->
    <div class="add-button-container">
      <el-button
        v-hasPermi="['crm:module:update']"
        class="add-btn"
        plain
        type="primary"
        @click="openForm('create')"
      >
        <Icon icon="ep:plus" class="btn-icon" />
        新增跟进类型
      </el-button>
    </div>

    <!-- 表格容器 -->
    <div class="table-container">
      <el-table v-loading="loading" :data="list" :stripe="true" border class="custom-table">
        <el-table-column label="跟进类型名称" align="center" prop="name" :min-width="150" />
        <el-table-column label="排序" align="center" prop="sort" :min-width="80" />
        <el-table-column label="是否共用" align="center" prop="isCommon" :min-width="120">
          <template #default="scope">
            <el-tag :type="scope.row.isCommon == 1 ? 'success' : 'danger'" class="status-tag">
              {{ scope.row.isCommon == 1 ? '是' : '否' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" :min-width="140" fixed="right">
          <template #default="scope">
            <div class="action-buttons">
              <el-button
                link
                type="primary"
                @click="openForm('update', scope.row.id)"
                v-hasPermi="['crm:module:update']"
                class="action-btn edit-btn"
                size="small"
              >
                <Icon icon="ep:edit" class="action-icon" />
                编辑
              </el-button>
              <el-button
                link
                type="danger"
                @click="handleDelete(scope.row.id)"
                v-hasPermi="['crm:module:update']"
                class="action-btn delete-btn"
                size="small"
              >
                <Icon icon="ep:delete" class="action-icon" />
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 新增模块form -->
    <Form ref="formRef" :moduleId="props.moduleId" @success="getList"></Form>
  </div>
</template>

<script setup lang="ts">
import Form from './form.vue'
import * as FollowTypeApi from '@/api/crm/module/index'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const props = defineProps<{
  moduleId: Number
}>()

watch(
  () => props.moduleId,
  (newVal) => {
    queryParams.moduleId = newVal
    getList()
  }
)

const loading = ref(false)
const list = ref([])
const queryParams = reactive({
  moduleId: props.moduleId
})
const getList = async () => {
  try {
    loading.value = true
    const data = await FollowTypeApi.getFollowTypeConfigList(queryParams)
    if (data) {
      list.value = data
      loading.value = false
    }
  } catch {
    loading.value = false
  }
}

const formRef = ref()
const openForm = (type, id) => {
  formRef.value.open(type, id)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await FollowTypeApi.deleteFollowTypeConfig(id)
    message.success('删除成功')
    // 刷新列表
    await getList()
  } catch {}
}

// 初始化
onMounted(() => {
  getList()
})
</script>

<style scoped>
.follow-type-config {
  padding: 16px;
  background: #f8f9fa;
}

/* 新增按钮容器 */
.add-button-container {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
}

.add-btn {
  background: transparent;
  border-color: #0052cc;
  color: #0052cc;
  padding: 12px 32px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  min-width: 200px;
}

.add-btn:hover {
  background: #0052cc;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
}

.btn-icon {
  margin-right: 6px;
  font-size: 16px;
}

/* 表格容器 */
.table-container {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: auto;
}

.custom-table {
  border-radius: 6px;
  overflow: hidden;
}

.custom-table :deep(.el-table__header) {
  background: #f5f7fa;
}

.custom-table :deep(.el-table__header th) {
  background: #f5f7fa;
  border-bottom: 2px solid #0052cc;
  color: #303133;
  font-weight: 600;
  padding: 12px 0;
}

.custom-table :deep(.el-table__body tr:hover > td) {
  background-color: #f0f7ff;
}

.custom-table :deep(.el-table__row--striped td) {
  background: #fafbfc;
}

.custom-table :deep(.el-table__body td) {
  padding: 12px 0;
}

/* 状态标签 */
.status-tag {
  font-weight: 500;
  border-radius: 4px;
  padding: 4px 8px;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.action-btn {
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.edit-btn {
  color: #0052cc;
}

.edit-btn:hover {
  background: rgba(0, 82, 204, 0.1);
  transform: translateY(-1px);
}

.delete-btn {
  color: #f56c6c;
}

.delete-btn:hover {
  background: rgba(245, 108, 108, 0.1);
  transform: translateY(-1px);
}

.action-icon {
  font-size: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .follow-type-config {
    padding: 12px;
  }

  .add-button-container {
    padding: 16px;
    margin-bottom: 12px;
  }

  .add-btn {
    width: 100%;
    max-width: 300px;
    padding: 10px 24px;
  }

  .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .custom-table {
    min-width: 600px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .follow-type-config {
    padding: 8px;
  }

  .add-button-container {
    padding: 12px;
  }

  .table-container {
    padding: 8px;
  }

  .custom-table {
    min-width: 700px;
  }

  .add-btn {
    font-size: 13px;
    padding: 8px 20px;
  }
}

/* 加载状态优化 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
}

/* 滚动条美化 */
.table-container::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #0052cc;
}

/* 动画效果 */
.add-button-container,
.table-container {
  transition: all 0.3s ease;
}

.add-button-container:hover,
.table-container:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 主题色变量 */
:root {
  --primary-color: #0052cc;
  --primary-hover: #003d99;
  --primary-light: #f0f7ff;
  --border-color: #e4e7ed;
  --text-color: #303133;
  --bg-color: #f8f9fa;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-button--primary.is-plain) {
  color: #0052cc;
  background: #f0f7ff;
  border-color: #0052cc;
}

:deep(.el-button--primary.is-plain:hover) {
  background: #0052cc;
  border-color: #0052cc;
  color: #fff;
}

:deep(.el-tag--success) {
  background-color: #f0f9ff;
  border-color: #0052cc;
  color: #0052cc;
}

:deep(.el-tag--danger) {
  background-color: #fef0f0;
  border-color: #f56c6c;
  color: #f56c6c;
}
</style>
